<template>
	<view class="discuss">
		
		
		<view class="item bg-white flex justify-between" v-for="(item,i) in pageData" :key="i">
			
			<view class="left1  flex justify-between flex-wrap">
				<view class="title">
					{{item.title}}
				</view>
				<view class="bottom justify-between  basis-xll flex align-center">
					<view class="left  basis-xl flex text-cut">
						<view class="tage" v-for="(tag,i) in item.tag" :key="i">
							{{tag.name}}
						</view>
					</view>
					<view class="basis-sm  text-right">
						{{item.time}}
					</view>
				</view>
			</view>
			<view class="right ">
				<image :src="res+item.bg" class="" mode="aspectFill"></image>
				
			</view>
		
		
		</view>
	  
	</view>


</template>

<script>
	export default {
		name: "discuss",
		data() {
			return {
				res: this.apiHost + "/static/otherApp/",
                pageData:[
					
					{
						title:`“双减”政策落地半个月，K12教培机构如何自救？`,
						tag:[
							{
								name:"教育部"
							},
							{
							    name:"减负"
							}
						],
						bg:"/static/cloudClassroom/4@2x.png",
						time:"9月10日"
					},
					{
						title:`为上千家企业提供服务`,
						tag:[
							{
								name:"教育部"
							}
						],
						bg:"/static/cloudClassroom/4@2x.png",
						time:"9月10日"
					}
					
				],
				
					


			}
		}


	}
</script>

<style lang="scss" scoped>
	
	.discuss{
		.item{
			margin: calc(100vw*(20/750));
			width: calc(100vw*(702/750));
			height: calc(100vw*(200/750));
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			padding: 24rpx;
			.left1{
				width: calc(100vw*(379/750));
			    margin-right: 29rpx;
				.title{
					font-size: 32rpx;
					font-weight: 800;
					color: #333333;
					margin-top: 16rpx;
					display: -webkit-box;
					-webkit-box-orient:vertical;
					overflow: hidden;
					-webkit-box-clamp:2;
					
				}
				.bottom{
				   font-size: 20rpx;
				   font-weight: bold;
				   color: #999999;
				   .left{
					   .tage{
						   font-weight: bold;
						   color: #3783D0;
						   margin-right: 10rpx;
						   background: #E2F0FF;
						   border-radius: 4rpx;
						   padding: 7rpx 18rpx 7rpx 18rpx;
					   }
				   }
				   
				}
			}
			.right{
				width: calc(100vw*(250/750));
				image{
					width: inherit;
					height: 100%;
					border-radius: 20rpx;
				}
				
			}
			
			
		}
		
		
	}

</style>
